<template>
	<view class="index">
		<view class="head background-red">
			<!-- 标题(跳转) -->
			<view class="head-title flex com-center" @click="tiaos()">
				<view class="title-left" >
					<image src="../../static/carcont1.png" mode="widthFix" style="width: 80rpx;"></image>
				</view>
				<view class="title-right" >
					<view class="title-right-top flex" >
						团油放心油<image src="../../static/spot.png" mode="widthFix" style="width: 30rpx;margin: 4rpx 0;">
						</image>加油有保险<image src="../../static/right.png" mode="widthFix"
							style="width: 20rpx;margin: 8rpx;"></image>
					</view>
					<view class="title-right-bot flex" >
						品质保障<image src="../../static/vertical.png" mode="widthFix" style="width: 20rpx;margin: 8rpx;">
						</image>
						加油保险<image src="../../static/vertical.png" mode="widthFix" style="width: 20rpx;margin: 8rpx;">
						</image>
						先行赔偿
					</view>
				</view>
			</view>
			<!-- 搜索框(跳转) -->
			<view class="search com-center flex" @click="tiao()">
				<view class="search-left flex">
					<image src="../../static/search.png" mode="widthFix"
						style="width: 50rpx;position: relative;top: 16rpx;padding: 0 20rpx;border-right: #F4F4F4 2px solid;">
					</image>
					<view class="text">搜索油站</view>
				</view>
				<view class="search-right">
					搜索
				</view>
			</view>
			<!-- swiper -->
			<swiper class="com-center head-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item>
					<view class="swiper-item" @click="swiper1()">
						<image src="../../static/red.webp" mode="widthFix" style="width: 100%;border-radius: 30rpx;">
						</image>
						<view class="swiper-text">
							资质规则
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" @click="swiper2()">
						<image src="../../static/orange.webp" mode="widthFix" style="width: 100%;border-radius: 30rpx;">
						</image>
						<view class="swiper-text">
							资质规则
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item" style="position: relative;" @click="swiper3()">
						<image src="../../static/blue.webp" mode="widthFix"
							style="width: 100%;border-radius: 30rpx;height: 100%;"></image>
						<view class="swiper-text">
							资质规则
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 导航 -->
			<view class="nav com-center flex">
				<dl @click="swiper3()">
					<dd>
						<image src="../../static/nav1.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						团油养车
					</dt>
				</dl>
				<dl @click="nav2()">
					<dd>
						<image src="../../static/nav2.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						省钱会员
					</dt>
				</dl>
				<dl @click="swiper2()">
					<dd>
						<image src="../../static/nav3.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						签到
					</dt>
				</dl>
				<dl @click="nav4()">
					<dd>
						<image src="../../static/nav4.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						认证有奖
					</dt>
				</dl>
				<dl @click="nav5()">
					<dd>
						<image src="../../static/nav5.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						转盘抽奖
					</dt>
				</dl>
				<dl @click="nav6()">
					<dd>
						<image src="../../static/nav6.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						外卖红包
					</dt>
				</dl>
				<dl @click="nav7()">
					<dd>
						<image src="../../static/nav7.png" mode="widthFix" style="width: 94rpx;"></image>
					</dd>
					<dt>
						重要通知
					</dt>
				</dl>
			</view>
			<!-- 优惠券 -->
			<view class="coupon">
				<view class="coupon-cont flex com-center" @click="swiper1()">
					<image src="../../static/308.png" mode="widthFix" style="border-radius: 20rpx;width: 330rpx;">
					</image>
					<image src="../../static/168.png" mode="widthFix" style="border-radius: 20rpx;width: 330rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="cont">
			<!-- 精选 -->
			<view class="selected">
				<view class="selected-title">
					<view class="selected-title1 com-center flex">
						<view class="left">
							精选
						</view>
						<view class="right flex">
							<view class="flex">92#/筛选<image src="../../static/dropdown.png" mode="widthFix"
									style="width: 30rpx;"></image>
							</view>
							<view class="flex">距离优先<image src="../../static/dropdown.png" mode="widthFix"
									style="width: 30rpx;"></image>
							</view>
						</view>
					</view>
					<!-- 渐变下边框 -->
					<view class="underline"></view>
					<!-- 精选下多标题 -->
					<view class="selected-title2 flex com-center">
						<view class="title2-cont">
							团油优选
						</view>
						<view class="title2-cont">
							加油返券
						</view>
						<view class="title2-cont">
							免费洗车
						</view>
					</view>
				</view>
				<!-- 精选内容 -->
				<view class="selected-cont com-center">
					<view class="selected-list com-center" @click="details()">
						<!-- 列表标题 -->
						<view class="list-title">
							大地能源集团天平加油站
						</view>
						<!-- 列表地址 -->
						<view class="list-titles flex">
							<view class="titles-left">泰山大街西段大地能源加油站</view>
							<view class="titles-right flex">
								<image src="../../static/address.png" mode="widthFix"
									style="width: 35rpx;margin-top: 5rpx;"></image>
								3.35km
							</view>
						</view>
						<!-- 列表价格 -->
						<view class="price flex">
							￥<view class="big-font">7.31</view>/L
							<view class="small-price">油站价￥7.69/L</view>
						</view>
						<!-- 列表价格下 -->
						<view class="price-bottom flex">
							<view class="price-bottom-left">
								<view class="left-top flex">
									完单返加油金<view class="font-red">0.38</view>/升
								</view>
								<view class="left-bottom flex">
									<!-- 累计消费 -->
									<view class="profit-return">
										累计消费返豪礼
									</view>
									<!-- 加油险 -->
									<view class="lnsurance">
										加油险
									</view>
								</view>
							</view>
							<!-- 立即加油 -->
							<view class="price-bottom-right flex">
								立即加油<image src="../../static/turnright.png" mode="widthFix"
									style="width: 20rpx;margin-top: 16rpx;"></image>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="selected-list com-center">
						<!-- 列表标题 -->
						<view class="list-title">
							泰安服务区东区加油站
						</view>
						<!-- 列表地址 -->
						<view class="list-titles flex">
							<view class="titles-left">泰安服务区</view>
							<view class="titles-right flex">
								<image src="../../static/address.png" mode="widthFix"
									style="width: 35rpx;margin-top: 5rpx;"></image>
								4.22km
							</view>
						</view>
						<!-- 列表价格 -->
						<view class="price flex">
							￥<view class="big-font">7.69</view>/L
							<view class="small-price">油站价￥8.17/L</view>
						</view>
						<!-- 列表价格下 -->
						<view class="price-bottom flex">
							<view class="price-bottom-left">
								<view class="left-top flex">
									完单返加油金<view class="font-red">0.50</view>/升
								</view>
								<view class="left-bottom flex" v-if="flase">
									<!-- 累计消费 -->
									<view class="profit-return">
										累计消费返豪礼
									</view>
									<!-- 加油险 -->
									<view class="lnsurance">
										加油险
									</view>
								</view>
							</view>
							<!-- 立即加油 -->
							<view class="price-bottom-right flex">
								立即加油<image src="../../static/turnright.png" mode="widthFix"
									style="width: 20rpx;margin-top: 16rpx;"></image>
							</view>
						</view>
					</view>
					<!-- 3... -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			tiao() {
				uni.navigateTo({
					url: "/pages/index/search/search"
				})
			},
			tiaos() {
				uni.navigateTo({
					url: "/pages/index/title/title"
				})
			},
			swiper1() {
				uni.switchTab({
					url: "/pages/save/save"
				})
			},
			swiper2() {
				uni.navigateTo({
					url: "/pages/index/sign-in"
				})
			},
			swiper3() {
				uni.navigateTo({
					url: "/pages/index/car/car"
				})
			},
			nav2() {
				uni.navigateTo({
					url: "/pages/huiyuan/huiyuan"
				})
			},
			nav4() {
				uni.navigateTo({
					url: "/pages/index/authentication"
				})
			},
			nav5() {
				uni.navigateTo({
					url: "/pages/index/turntable"
				})
			},
			nav6() {
				uni.navigateTo({
					url: "/pages/index/red"
				})
			},
			nav7() {
				uni.navigateTo({
					url: "/pages/index/important"
				})
			},
			details() {
				uni.navigateTo({
					url: "/pages/index/selected-details"
				})
			},
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
